<template>
<div id="app">
  <h1>水果列表</h1>
  <form @submit.prevent="insert" >
    <input type="text" v-model="name">
    <input type="text" v-model.number="price">
    <button  >添加</button>
  </form>
  <button @click="info" >测试</button>
<!--  <button @click="show" >展示</button>-->
  <li v-for="item,index in list">
    名称：{{item.name}};
    单价：{{item.price}};
    数量：
    <button @click="decrease(index)">-</button>
    <span>{{item.count}}</span>
    <button @click="increase(index)">+</button>
  </li>

<h3>总价：{{totalPrice}}</h3>
  <el-button @click="buy">购买</el-button>

  <el-upload
      action="http://localhost:9480/user/import"
      :on-success="handleUploadSuccess"
      :show-file-list=false
      :limit="1"
      accept='.xlsx'
      style="display: inline-block; margin: 0 10px"
  >
    <el-button type="primary">导入</el-button>
  </el-upload>
  <el-button type="primary" @click="exportUser">导出</el-button>

</div>
  <el-image
      style="width: 100px; height: 100px"
      :src="url"
      :fit="fit"></el-image>
  <!--  <div id="myChart" :style="{width: '800px', height: '600px'}"></div>-->

</template>

<script>

import request from "../../utils/request";

export default {

  name: "Test",

data(){

    return{
      name:"",
      price:"",
      list:[],
      url: 'https://thirdwx.qlogo.cn/mmopen/vi_32/DYAIOgq83eomSnwDxoXKdkuEaEgTNEEG9YapWjt95iaN9ZpicE9HB1P6Oqic2JalHjJggeOkFV9jqmK49UE3xhGOQ/132.jpg'

    }
},
  //计算属性
  computed:{
    totalPrice(){
      let sum = 0;
      this.list.forEach(v => {
    sum +=(v.price*v.count);

      })
      return sum;
    }


  },
  mounted() {
    this.drawLine()
  },
  methods:{


    drawLine() {

      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$root.echarts.init(document.getElementById('myChart'))
      let option = {
        title: {
          text: '各地区用户比例统计图',
          subtext: '虚拟数据',
          left: 'left'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          trigger: 'item'
        },
        toolbox: {
          show: true,
          feature: {
            mark: {show: true},
            dataView: {show: true, readOnly: false},
            restore: {show: true},
            saveAsImage: {show: true}
          }
        },
        series: [
          {
            name: '用户比例',
            type: 'pie',
            radius: [50, 250],
            center: ['50%', '50%'],
            roseType: 'area',
            itemStyle: {
              borderRadius: 8
            },
            data: []
          }
        ]
      }

      request.get("/Statistics/selectInfo").then(res => {

        res.data.forEach(item => {

          option.series[0].data.push({name: item.key, value: item.value})
        })
        // 绘制图表
        myChart.setOption(option);
      })


      //   // 绘制图表
      //
      // })
      // setTimeout(function () {
      // let myChart = this.$root.echarts.init(document.getElementById('myChart'))
      //  let option = {
      //     legend: {},
      //     tooltip: {
      //       trigger: 'axis',
      //       showContent: false
      //     },
      //     dataset: {
      //       source: [
      //         ['product', '小龙虾', '香蕉', '苹果', '芒果', '辣椒', '白菜','萝卜'],
      //         ['第1个月', 90, 90, 90, 70, 53, 85, 85],
      //         ['第2个月', 51, 51, 55, 53, 73, 68, 85],
      //         ['第3个月', 40, 62, 69, 36, 45, 32, 85],
      //         ['第4个月', 25, 37, 41, 18, 33, 49, 85]
      //       ],
      //
      //     },
      //     xAxis: { type: 'category' },
      //     yAxis: { gridIndex: 0 },
      //     grid: { top: '55%' },
      //     series: [
      //       {
      //         type: 'line',
      //         smooth: true,
      //         seriesLayoutBy: 'row',
      //         emphasis: { focus: 'series' }
      //       },
      //       {
      //         type: 'line',
      //         smooth: true,
      //         seriesLayoutBy: 'row',
      //         emphasis: { focus: 'series' }
      //       },
      //       {
      //         type: 'line',
      //         smooth: true,
      //         seriesLayoutBy: 'row',
      //         emphasis: { focus: 'series' }
      //       },
      //       {
      //         type: 'line',
      //         smooth: true,
      //         seriesLayoutBy: 'row',
      //         emphasis: { focus: 'series' }
      //       },
      //       {
      //         type: 'pie',
      //         id: 'pie',
      //         radius: '30%',
      //         center: ['50%', '25%'],
      //         emphasis: {
      //           focus: 'self'
      //         },
      //         label: {
      //           formatter: '{b}: {@2012} ({d}%)'
      //         },
      //         encode: {
      //           itemName: 'product',
      //           value: '2012',
      //           tooltip: '2012'
      //         }
      //       }
      //     ]
      //   };
      //   myChart.on('updateAxisPointer', function (event) {
      //     const xAxisInfo = event.axesInfo[0];
      //     if (xAxisInfo) {
      //       const dimension = xAxisInfo.value + 1;
      //       myChart.setOption({
      //         series: {
      //           id: 'pie',
      //           label: {
      //             formatter: '{b}: {@[' + dimension + ']} ({d}%)'
      //           },
      //           encode: {
      //             value: dimension,
      //             tooltip: dimension
      //           }
      //         }
      //       });
      //     }
      //   });



    },
show(){
      this.drawLine()
},



    handleUploadSuccess(res) {
      if (res.code === "0") {
        this.$message.success("导入成功")
        this.load()
      }
    },
    exportUser() {
      console.log("2333333333333")
      location.href = "http://" + "localhost"+ ":9480/replenshment/export";
    },
    buy(){

      request.get("/replenshment/export").then(res =>{
          console.log(res.data)

    })
 },
    insert(){
      this.list.push({
        name:this.name,
        price:this.price,
        count:1
})
    },
    increase(i){
      this.list[i].count++

    },decrease(i){
      this.list[i].count--

      if(this.list[i].count<=0&& confirm("是否删除") ){

        this.list.splice(i,1)
      }


    }

  },

}

</script>

<style scoped>

</style>